<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../static/plugins/jquery-easyui-1.5.5.4/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../static/plugins/jquery-easyui-1.5.5.4/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../static/plugins/easyui/common/index.css">
	<link href="../static/plugins/easyui/jquery-easyui-theme/icon.css" rel="stylesheet" type="text/css" />
	<link href="../static/plugins/easyui/icons/icon-all.css" rel="stylesheet" type="text/css" />
	<link href="../static/plugins/easyui/common/other.css" rel="stylesheet" type="text/css" />
	<script src="../webjars/jquery/3.3.1/dist/jquery.js"></script>
	<script type="text/javascript" src="../static/plugins/jquery-easyui-1.5.5.4/jquery.easyui.min.js"></script>
	
	<script type="text/javascript" th:inline="javascript">
	var path = /*[[@{/databaseHandler/}]]*/;
	/*<![CDATA[*/
    var context = /*[[@{/}]]*/;
    /*]]>*/
	console.log(path);
	var connectionId;
	var databaseName;
	var tableName;
	$(function(){
		connectionId = $("#connectionId").val();
		databaseName = $("#databaseName").val();
		tableName = $("#tableName").val();		
		 $("#dg2").datagrid({  
		        type: 'POST',  
		        nowrap: false,  
		        striped: true,  
		        fit:true,  
		        width:1024,  
		        height:500,  
		        url:path+"getTableFieldList",  
		        pageSize:30,  
		        remoteSort: false,  
		        pagination:false,  
		        rownumbers:true,  
		        singleSelect:true,
		        toolbar:'#tb2',
		        queryParams:{  
		        	databaseName:databaseName,  
		        	connectionId:connectionId,
		        	tableName:tableName
		        },
		        columns:[
			        [  
			            /* {field:'TABLE_CAT',title:'数据库名',width:160}, */  
			            {field:'table_name',title:'表名',width:160},
			            {field:'COLUMN_NAME',title:'字段名',width:160},
			            {field:'REMARKS',title:'字段描述',width:160},
			            {field:'TYPE_NAME',title:'字段类型',width:160},
			            {field:'COLUMN_SIZE',title:'字段长度',width:160}
			        ]
		        ]
		    });
	})
	
	//查询方法  
	function query() {  
	    var url = path+"getTableFieldList?tableName="+tableName+"&databaseName="+databaseName +"&connectionId="+connectionId;
	    $.get(url, null ,showGrid, "json"); 
	}  

	//处理返回结果，并显示数据表格  
	function showGrid(data) {
	    var options = {  
	    	// method: "POST",
	        url:path+"getTableFieldList?tableName="+tableName+"&databaseName="+databaseName +"&connectionId="+connectionId,
	        rownumbers: true ,
	        fit : true,
		    fitColumns : true,
		    border : false,
		    striped:true,
		    pagination:true,
		    pageNumber:1,
		    pageSize : 20,
		    pageList : [ 10, 20, 30, 40, 50 ],
		    singleSelect:false,
	        checkOnSelect:true,
	        selectOnCheck:true,
	        extEditing:false,
	        toolbar:'#tb2',
	        
	        autoEditing: false,          //该属性启用双击行时自定开启该行的编辑状态
	        singleEditing: false,
	        onBeginEdit:function( index, row ){
	         	// alert('index = ' + index );
	         	
	        	 obj = JSON.stringify( row ) ;
	        	 updatedRowIndex = index; 
	        	
	        },
	        onBeforeLoad:function( param ){
	         	var firstLoad = $(this).attr("firstLoad");
	        	if( firstLoad=="false"|| typeof(firstLoad)=="undefined"){
	        		$(this).attr("firstLoad","true");
	        		return false;
	        	}
	         	return true;
	        },
	        onAfterEdit:function( index, row, changes ){
	        	 if( Object.keys( changes ).length >0 ){
	        		  willChangeRow.push(  {"oldData": eval('('+obj+')') ,"changesData":  changes }  );
	        	 }
	        },
	        
	        onSelect:function( index, row ){
	    	   selectRowCount++;
	    	  // alert( selectRowCount );
	    	  //修改按钮只有选一行时 才有效
		      if(selectRowCount == 1){
			    $("#editRowButton").linkbutton("enable"); 
		      }else{
		        $("#editRowButton").linkbutton("disable"); 
		      }
	       },
	   
	        onUnselect:function(index, row){
		      selectRowCount--;
		     // alert( selectRowCount );
		  	  //修改按钮只有选一行时 才有效
		  	  
		  	 // alert( selectRowCount );
		     if(selectRowCount == 1){
			    $("#editRowButton").linkbutton("enable"); 
		     }else{
		        $("#editRowButton").linkbutton("disable"); 
		     }
	      },
	       
	       onDblClickCell: function(index,field,value){
	    	   saveRow();
	    	   
	    	   var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields'));  
	           //下面for循环，设定列能够编辑。当不能编辑时，editor的值为undefined，能够编辑值为text;  
	           for (var i = 0; i < fields.length; i++) {  
	              var col = $(this).datagrid('getColumnOption', fields[i]);  
	              col.editor1 = col.editor;  
	              //循环到的列，不等于鼠标点击的那一列时，设定列的editor的值为null；  
	               if (fields[i] != field ) {  
	                    col.editor = null;  
	                }  
	           }  
	             
	           //开始对一行进行编辑。param.index 为行号；对选中的一行进行编辑；  
	          $(this).datagrid('beginEdit',  index);  
	            
	           //for循环，设置col  
	          for (var i = 0; i < fields.length; i++) {  
	              //getColumnOption:返回指定列的选项。  
	              var col = $(this).datagrid('getColumnOption', fields[i]);  
	              //给列的editor属性赋值；text 或者其他；  
	              col.editor = col.editor1;  
	             // alert( col.editor );
	           }  
		   }
	    };  
	    /* if( data.status=='fail'){
	    		 parent.$.messager.show({ title : "提示",msg: data.mess , position: "center" });
	   	}  */   
	    options.columns = eval(data.columns);//把返回的数组字符串转为对象，并赋于datagrid的column属性  
	    options.idField = data.primaryKey ;
	    primary_key = data.primaryKey ;
	    dg = $("#dg2");  
	    dg.datagrid(options);//根据配置选项，生成datagrid  
	    dg.datagrid("loadData", data.rows); //载入本地json格式的数据  
	} 
	
	
	</script>
</head>
<body>
	<div id="tb2" style="padding:5px;height:auto">
        <div>
	       	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-table-row-insert" plain="true" id="addRowButton"  onclick="addRow2()"> 添加 </a>
	       		<span class="toolbar-item dialog-tool-separator"></span>
	          	       		           
	        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-table-row-delete" plain="true" id="delButton"   onclick="del()">删除</a>
	       		<span class="toolbar-item dialog-tool-separator"></span>
	        <!-- <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-standard-arrow-refresh" id="refreshButton" plain="true" onclick="refresh()">刷新</a>
	          	<span class="toolbar-item dialog-tool-separator"></span> -->
	          
	        <a href="javascript:void(0)" class="easyui-linkbutton"  plain="true"  >&nbsp;</a>
	          	<span class="toolbar-item dialog-tool-separator"></span>
	          
	        <!-- <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" plain="true" id="saveRowButton"  onclick="saveRow()"> 保存 </a>
	       		<span class="toolbar-item dialog-tool-separator"></span>
	            
	       	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" plain="true" id="cancelButton"  onclick="cancelChange()"> 取消 </a>
	       		<span class="toolbar-item dialog-tool-separator"></span> -->
	        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-tip" plain="true" title="可双击行编辑数据. &#13;钩选行进行复制."></a>
       </div> 
  </div>
 <input type="hidden" id="connectionId" th:value="${connectionId}" >
 <input type="hidden" id="databaseName" th:value="${databaseName}" >
 <input type="hidden" id="tableName"  th:value="${tableName}">
 <input type="hidden" id="objectType" th:value="${objectType}">
<table id="dg2"></table>
<div id="dlg2">
</div>  
<div id="dlgg"   ></div>  
<div id="addRow" ></div>
 
<form id="form2" method="post"  action=""  style="display:none"   >
   <input type="hidden" id="databaseName" name="databaseName" th:value="${databaseName}" >
   <input type="hidden" id="tableName"    name="tableName" th:value="${tableName}">
   <input type="hidden" id="checkedItems" name="checkedItems" >
   <input type="hidden" id="primary_key"  name="primary_key" >
</form>

</body>
</html>